<script setup>
import {reactive, ref} from "vue";

const props = defineProps({
  // 用户ID，用于确定用户是否关注作者
  userId: {
    type: String
  },
  // 作者ID，用于查询作者信息
  authorId: {
    type: String
  }
})

import { isFocus } from "@/api/people/select_user";
const flagIsFocus = ref(false);
isFocus(props.userId,props.authorId)
    .then((res) => {
      flagIsFocus.value = res.isFocus;
    })

import { cardInfo } from "@/api/people/select_author";
const author = reactive({
  xm: '信息请求中...',
  gxqm: '用户没有个性签名',
  txurl: '',
  jj: '信息请求中...'
})
cardInfo(props.authorId)
    .then((res) => {
      author.xm = res.xm;
      author.gxqm = res.gxqm;
      author.jj = res.jj;
      author.txurl = res.txurl;
    })


</script>

<template>
  <el-card shadow="never" class="author-card" :body-style="{ padding: '0px' }">
    <el-avatar :size="120" :src="author.txurl"></el-avatar>
    <div class="text-plane">
      <div class="title">
        <h3 style="font-weight: bold">{{ author.xm }}</h3>
        <div class="qm" style="font-size: 9px; color: #909399">
          {{ author.gxqm }}
        </div>
      </div>
      <div class="content">
        <div class="text">个人简介：{{ author.jj }}</div>

        <div style="width: 100%; margin-bottom: 0.2rem; text-align: center">
          <el-link>更多>>></el-link>
        </div>
        <div class="btn" >
          <div style="width: 60%" v-show="!flagIsFocus">
            <el-button @click="flagIsFocus = true" type="primary">关注</el-button>
          </div>
          <div style="width: 60%" v-show="flagIsFocus">
            <el-button @click="flagIsFocus = false">取消关注</el-button>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<style scoped>
.author-card {
  width: 15rem;
  height: 20rem;
  text-align: center;
  padding-top: 0.5rem;
  border: none;
}
.author-card .el-avatar {
  margin: 0 auto;
}
.author-card .text-plane {
  margin-top: 1rem;
  height: 11rem;
  background-color: #d9ecff;
  border-top-right-radius: 30px;
}
.author-card .text-plane:after {
  content: '';
  position: absolute;
  top: -30px;
  left: 0;
  height: 30px;
  width: 30px;
  background: radial-gradient(circle at 100% 0%,transparent 30px,#d9ecff 0)
}
.author-card .text-plane .title {
  position: relative;
  top: -1rem;
  height: 25%;
}
.author-card .text-plane .title .qm {
  width: 80%;
  margin: 0 auto;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.author-card .text-plane .content {
  text-align: left;
  font-size: 12px;
  height: 75%;
  margin-top: -0.5rem;
}
.author-card .text-plane .content .text {
  padding: 0 0.5rem 0 0.5rem;
  margin-bottom: 0.2rem;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.author-card .text-plane .content .btn {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.5rem;
  display: flex;
  justify-content: space-around;
}
.author-card .text-plane .content .btn .el-button {
  width: 100%;
}
</style>